昨天我們解釋了什麼是DOM跟BOM，今天我們繼續來認識DOM Tree 和 DOM Node

DOM Tree

DOM 採用樹狀結構 (tree) 來儲存網頁元素，樹狀結構是資料結構的一種，特色是有明確的父子階層關係，也因為階層關係明確，按相對關係查找資料特別方便。

圖片來源：維基百科

樹狀裡每一個部分叫做「節點 (node)」，節點有四種類型：

• 元素節點 (element node)
• 文字節點 (text node)
• 屬性節點 (attribute node)
• 註解節點 (comment node)

DOM Node

DOM的根節點：document

還記得這張圖嗎？

在 DOM 的樹狀結構裡，根節點是 document，代表網頁的本身。

今天我們打開網頁按下F12，然後在主控台(Consoie)輸入document，會回傳#document ，我們把他展開後就會看到所有的 HTML 文件內容：

而這時候我們在 DevTool 的 元素(Elements) 面板裡看到的內容就是 DOM 的結構，他不是HTML 文件，而是 DOM 操作的結果，如果使用 JavaScript 改變 DOM 的狀態，瀏覽器顯示在 元素(Elements)  會同步更新。

剛剛那張圖我們看到因為document是整個DOM的最頂部，所以他是DOM的跟節點，那window會是BOM的根節點嗎？

BOM的跟節點：window

沒錯就如標題所示，window確實是BOM的根節點，我們一樣在主控台(Consoie)輸入window ，這次跑出來的是一個object，裡面有很多的屬性和方法：

還記得昨天有提到：

在瀏覽器裡的 window object扮演著兩種角色：

• ECMAScript 標準裡的「全域物件」 (Global Object)
• JavaScript 用來與瀏覽器溝通的窗口

因此我們就可以得知 window object 它是 global variable，只要開啟瀏覽器的瞬間，window object 就會出現。它擁有自己的 Methods 跟 Properties。

接下來稍微介紹一些Methods 跟 Properties：

Window Object Methods：

💡 標準語法：window.alert() Tips: 在window object底下成員，window可以不用寫

alert():

執行後會跳出一個帶有 button 的視窗

prompt():

執行後會跳出一個對話視窗，可讓使用者輸入內容。（輸入的內容，最後都會是 String）

setInterval()：

設定每隔幾秒的時間要執行一個 function

（1000 為 1 秒，1500 為 1.5 秒，2000 為 2 秒…依此類推）

clearInterval()：

停止setInterval()的執行

addEventListener()：

DOM Event(事件處理)時會再說明！！！

Window Object Properties :

💡 OOP 物件導向： 一個object可以是另一個 object 的 Properties

console

console.log()檢查程式碼是否正確被執行時常使用的功能

console 的 properties 並不常拿來做使用，因此這裡只介紹 console 的 methods。

let map = ["台中", "台北", "新北", "桃園", "高雄"]
console.log(map)// 結果如下圖

console.error()定義如果錯誤時會出現什麼

let map = ["台中", "台北", "新北", "桃園", "高雄"]
console.error('喔喔 錯了喔')// 結果如下圖

console.table()將資料整理成表格來顯示

let map = ["台中", "台北", "新北", "桃園", "高雄"];
console.table(map);// 結果如下圖

console.warn()會出現黃色驚嘆號

let map = ["台中", "台北", "新北", "桃園", "高雄"]
console.warn('小心')// 結果如下圖

Document

Document is an object. 所以他擁有自己的 methods 和 properties

getElement家族return 的是 HTMLCollection

querySelectorAll()return 的是 NodeList

Array 和 NodeList 可以使用 forEach，但是 HTMLCollection 無法使用 forEach

所以大多數人使用 querySelector 系列而不使用 get 系列，因為資料無法用 forEach 操作

property:

有 body、doctype、charset、head…等。

methods:

getElementsByld()

• 用 id 取得 Element，存在一個 HTMLCollection 裡面

getElementsByClassName()

• 用 class 取得 Element，存在一個 HTMLCollection 裡面

addEventListener()

• DOM Event(事件處理)時會在再說明！！！

createElement()

• 依指定的標籤名稱（tagName）建立 HTML 元素

let element = document.createElement(tagName);
//tagName:A string that specifies the type of element to be created.

querySelector()

• 只會return 滿足第一個css selector 的 HTML element

querySelectorAll()

• 所有滿足條件的都會 return 回來，存在一個 NodeList 裡面

這邊先簡單介紹，下一篇會在更詳細說明。

結果補充資料比主題還多ＸＤＤ但拿出來變得主題好少，只好先這樣了。

參考資料：

udemy-2022網頁開發全攻略